<template>
  <div class="app-container">
    <!--查询条件开始-->         <!--关联查询参数状态-->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
      <el-form-item label="菜单名称" prop="menuName"> 
        <el-input 
        v-model="queryParams.menuName"
        placeholder="请输入菜单名称"
        clearable
        size="small"
        style="width:240px"
        />
      </el-form-item>
      <el-form-item label="菜单状态" prop="status">
        <el-select
        v-model="queryParams.status"
        placeholder="请选择状态"
        clearable
        size="small"
        style="width:240px"
        >
        <el-option
          v-for="dict in statusOptions"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        />
        </el-select>
      </el-form-item>
       <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="normal" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="danger" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>
    <!--查询条件结束-->

    <!--数据表格开始-->
    <el-table 
    v-loading = "loading"
    border
    :data="menuTableList"
    row-key="menuId"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label='菜单名称' align="left" prop="menuName" />
      <el-table-column label='菜单类型' align="center" prop="menuType" >
        <template slot-scope="scope">
          <el-tag
            effect="dark"
            :type="scope.row.menuType==='M'?'primary': scope.row.menuType==='C'?'danger':'success'"
          >
            {{scope.row.menuType==='M'?'目录':scope.row.menuType==='C'?'菜单':'按钮'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label='组件路由' align="center" prop="path" >
        <template slot-scope="scope">
          <el-tag
          effect="dark"
          type="info"
          >
          {{scope.row.path}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label='权限标识' align="center" prop="percode" />
      <el-table-column label='状态' align="center" prop="status" :formatter="statusFormatter" />
      <el-table-column label='创建时间' align="center" prop="createTime" />
      <el-table-column label='操作' align="center" >
        <template slot-scope="scope">
             <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAdd(scope.row)">新增</el-button>
             <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!--数据表格结束-->

    <!--添加和修改的弹出层开始 append-to-body是否插入至body元素上-->
    <el-dialog
    :title="title"
    :visible.sync="open"
    width="600px"
    center
    append-to-body
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    
      <el-row>
        <el-col :span ="24">
          <el-form-item label="上级菜单" prop="parentName">
            <treeselect
              v-model="form.parentId"
              :options="menuOptions"
              :show-count="true"
              placeholder="请选择上级菜单"
              :normalizer="normalizer"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio label="M">目录</el-radio>
                <el-radio label="C">菜单</el-radio>
                <el-radio label="F">按钮</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
               <el-input v-model="form.menuName" placeholder="请输入菜单名称" clearable size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由地址" prop="path">
               <el-input v-model="form.path" placeholder="请输入路由地址" clearable size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="form.menuType==='F'" label="权限标识" prop="percode">
               <el-input v-model="form.percode" placeholder="请输入权限标识" clearable size="small" />
          </el-form-item>
        </el-col>
         <el-col :span="12">
           <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
              :value="dict.dictValue"
            >{{ dict.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="描述" prop="remark">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!--添加和修改的弹出层结束-->
    

  

  </div>
</template>
<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {listAllMenus,addMenu,updateMenu,deleteMenuById,selectMenuTree,getMenuById} from '@/api/system/menu'
export default {
  components:{
    Treeselect
  },
  /**
   * 1.先查看查询条件有哪些(定义基础属性)
   */
  data(){
    return{
      //遮罩层
      loading:false,
      //菜单表的数据
      menuTableList:[],
      //菜单树的数据
      menuOptions:[],
      //弹出层的title
      title:'',
      //是否打开弹出层
      open:false,
      //状态 数据字典
      statusOptions:[],
      //查询参数
      queryParams:{
          menuName:undefined,
          status:undefined
      },
      //表单数据
      form:{},
      //表单校验
      rules:{
        menuName:[
          {required:true,message:'菜单名称不能为空',tirgger:'blur'}
        ]
      }

    }
  },
  //钩子
  created(){
    //查询状态字典数据
    this.getDataByType("sys_normal_disable").then(
      res =>{
        this.statusOptions = res.data
      }
    )
    //查询表格数据
    this.getMenuList()

  },
  methods:{
    //查询表格数据
    getMenuList(){
      this.loading=true
      listAllMenus(this.queryParams).then(res =>{
          this.menuTableList =  this.handleTree(res.data,'menuId')
          this.loading=false
      })

    },
    //查询菜单下拉树的数据
    getTreeSelect(){
        selectMenuTree().then(res =>{
          this.menuOptions=[]
          const menu = {menuId:0,menuName:'主类目',children:[]}
          menu.children = this.handleTree(res.data,'menuId')
          this.menuOptions.push(menu)
        })
    },
    //自定义键名
    normalizer(node){
      //如果有子节点 并且 长度为0
      // if(node.children && !node.children.length){//0为false
      //   delete node.children
      // }
      return {
        id:node.menuId,
        label:node.menuName,
        children:node.children
      }
    },
    //搜索
    handleQuery(){
      this.getMenuList()
    },
    //重置
    resetQuery(){
      this.resetForm('queryForm')
      this.getMenuList()
    },
    //新增
    handleAdd(row){
      this.reset()
      this.title = "添加菜单权限"
      if(row.parentId!=undefined){
        this.form.parentId=row.menuId
        this.form.menuType= row.menuType==='M'?'C':row.menuType==='C'?'F':''
      }
      this.getTreeSelect()
      this.open =true

    },
    //修改
    handleUpdate(row){
      this.reset()
       this.getTreeSelect()
      getMenuById(row.menuId).then(res =>{
        console.log(res.data)
        this.form = res.data
        this.open = true
        this.title = "修改菜单信息"
      })
     
    },
    //删除
    handleDelete(row){
       let menuId = row.menuId 
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteMenuById(menuId).then(res =>{
            this.msgSuccess('删除成功')
            this.getMenuList()
      })
        }).catch(() => {
          this.msgInfo('删除已取消')
         this.getMenuList()
        });
     

    },
    //状态翻译
    statusFormatter(row){
      return this.selectDictLabel(this.statusOptions,row.status)
    },
    //提交
    handleSubmit(){
       this.$refs['form'].validate((valid) => {
          if (valid) {
             this.loading=true
       if(this.form.menuId === undefined){
        addMenu(this.form).then(res =>{
         this.msgSuccess('保存成功')
         this.open=false
         this.getMenuList()
        
       }).catch(error => {
         this.getMenuList()
         this.loading = false
       })
       }else{
         updateMenu(this.form).then(res =>{
         this.msgSuccess('修改成功')
         this.open=false
         this.getMenuList()
       }).catch(error => {
         this.getMenuList()
       })
       }
          } 
        });

    },
    //取消
    cancel(){
      this.open = false
    },
    //重置表单
    reset(){
      this.form = {
        menuId:undefined,
        parentId:0,
        menuName:undefined,
        percode:undefined,
        path:undefined,
        menuType:'M',
        remark:undefined,
        status:'0'
      }
    }

  },
  watch:{
    'queryParams.menuName':{
      handler(){
        this.getMenuList()
      },
      deep:true
    },
     'queryParams.status':{
      handler(){
        this.getMenuList()
      },
      deep:true
    }
  }
  
}
</script>